<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color Picker</title>
    <link rel="stylesheet" href="popup.css">
</head>
<body>
    <div class="container">
        <h1>颜色选择器</h1>

        <!-- HEX输入区域 -->
        <div class="input-section">
            <label for="hex-input">HEX色值:</label>
            <input type="text" id="hex-input" placeholder="例: #FF0000">
            <button id="hex-btn">确定</button>
        </div>

        
        <!-- RGB输入区域 -->
        <div class="input-section">
            <label for="rgb-input">RGB色值:</label>
            <input type="text" id="rgb-input" placeholder="例: 255, 0, 0">
            <button id="rgb-btn">确定</button>
        </div>
        
        <!-- CMYK输入区域 -->
        <div class="input-section">
            <label for="cmyk-input">CMYK色值:</label>
            <input type="text" id="cmyk-input" placeholder="例: 0, 100, 100, 0">
            <button id="cmyk-btn">确定</button>
        </div>
        

        
        <!-- 颜色预览区域 -->
        <div class="color-preview">
            <div id="color-block"></div>

        </div>
        
        <!-- 错误提示 -->
        <div id="error-message" class="error hidden"></div>
        
        <!-- 清除按钮 -->
        <button id="clear-btn" class="clear-button">清除</button>
    </div>
    
    <script src="popup.js"></script>
</body>
</html>